<template>
	<view>
		<view class="content">
			<view class="score">
				分数：{{score}}
			</view>
			<view class="time">
				用时：{{minute < 10 ? '0' + minute : minute}}:{{second < 10 ? '0' + second : second}}:{{second100 < 10 ? '0' + second100 : second100}}
			</view>
			<view class="blockList">
				<view class="blockRow" v-for="(items, index1) in blockList" :key="index1">
					<view class="blockItem" :style="{background: item.color}" v-for="(item, index2) in items" :key="index2" @click="tread(index1, index2)"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				blockList: [
					[{
							color: '#ffffff',
						},
						{
							color: '#ffffff',
						},
						{
							color: '#ffffff',
						},
						{
							color: '#ffffff',
						}
					],
					[{
							color: '#ffffff',
						},
						{
							color: '#ffffff',
						},
						{
							color: '#ffffff',
						},
						{
							color: '#ffffff',
						}
					],
					[{
							color: '#ffffff',
						},
						{
							color: '#ffffff',
						},
						{
							color: '#ffffff',
						},
						{
							color: '#ffffff',
						}
					],
					[{
							color: '#ffffff',
						},
						{
							color: '#ffffff',
						},
						{
							color: '#ffffff',
						},
						{
							color: '#ffffff',
						}
					],
					[{
							color: '#ffffff',
						},
						{
							color: '#ffffff',
						},
						{
							color: '#ffffff',
						},
						{
							color: '#ffffff',
						}
					]
				],
				score: 0,
				minute: 0,
				second: 0,
				second100: 0,
				timer: 0,
				isGameing: 0
			}
		},
		onLoad() {
			this.blockList.forEach((row, index) => {
				row[this.random(0, 3, 1)]['color'] = '#000000'
			})
		},
		methods: {
			/* 点击触发踩事件 */
			tread(index1, index2) {
				
				if(this.isGameing == 0) {
					this.start();
					this.isGameing = 1;
				}
				if (index1 == 0 && this.blockList[index1][index2].color == '#000000') {
					this.blockList.push(this.getRow())
					this.blockList.shift()
					this.score++;
				} else {
					this.end()
				}
			},
			/* 开始计时 */
			start() {
				this.timer = setInterval(() => {
					if(this.second == 59) {
						this.minute ++;
						this.second = 0;
					} else if(this.second100 == 99) {
						this.second ++;
						this.second100 = 0;
					} else {
						this.second100++;
					}
				}, 10)
			},
			/* 游戏结束 */
			end() {
				let time = (this.minute < 10 ? '0' + this.minute : this.minute) +':'+(this.second < 10 ? '0' + this.second : this.second) +':'+(this.second100 < 10 ? '0' + this.second100 : this.second100)
				uni.showModal({
					title:'用时：'+time+'，得分：'+this.score,
					showCancel: false
				})
				this.second100 = 0;
				this.second = 0;
				this.minute = 0;
				this.score = 0;
				this.isGameing = 0;
				clearInterval(this.timer);
			},
			/* 获取随机数 */
			random(min, max, isInt) {
				// if (!min) return window.Math.random()
				var result = false
				result = min + window.Math.random() * (max - min + 1)
				if (isInt) {
					result = parseInt(result)
				}
				return result
			},
			/* 获取新的一行 */
			getRow() {
				let data = [{
						color: '#ffffff',
					},
					{
						color: '#ffffff',
					},
					{
						color: '#ffffff',
					},
					{
						color: '#ffffff',
					}
				]
				data[this.random(0, 3, true)].color = '#000000'
				return data;
			}
		}
	}
</script>

<style lang="less">
	.score {
		position: fixed;
		color: #a0a0a0;
		left: 20upx;
	}
	.time {
		position: fixed;
		color: #a0a0a0;
		right: 20upx;
	}
	.blockList {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column-reverse;

		.blockRow {
			display: flex;

			.blockItem {
				width: 25vw;
				box-sizing: border-box;
				height: calc((100vh - 44px) / 5);
				border: 1upx solid #000;
			}
		}

	}
</style>
